<!--
 * @Description:下拉选择组件
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-4-24 15:15:00
 * @LastEditors: Wang Xi
 * @LastEditTime: 2023-4-24 18:15:00
-->
<template>
	<!-- 组件整体 -->
	<view class="select_down_mDown">
		<!-- 组件头部 -->
		<view class="select_down" @click.stop="showDownMenu">
			<!-- 提示文字部分 -->
			<view v-if="active.imgSrc" class="select_down_text">
				<image style="width:46rpx;height:34rpx;" :src="active.imgSrc" mode=""></image>
				{{active.name}}
			</view>
			<!-- 分格线 -->
			<!-- <text class="select_down_border"></text> -->
			<!-- 图标 -->
			<image src="@/static/images/login/arrows-down.png" :class="`select_down_image ${showMenu?'is-down':''}`">
			</image>
		</view>
		<!-- 下拉显示区域 -->
		<view class="select_down_" v-show="showMenu">
			<view class="select_down_item" v-for="(item,index) in data" :key='index' @click="item_click(item)">
				<image style="width:46rpx;height:34rpx;" :src="item.imgSrc" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "selectDown",
		data() {
			return {
				showMenu: false,
			}
		},
		props: {
			value: {
				type: String
			},
			data: {
				type: Array
			}
		},
		computed: {
			active() {
				if (this.data) {
					const find = this.data.find(f => f.code === this.value)
					return find
				}
				return {}
			}
		},
		methods: {
			// 判断是否展开下拉框
			showDownMenu() {
				// 点击下拉菜单整体外关闭下拉菜单
				uni.$on('click', () => {
					this.showMenu = false
				})
				// document.body.addEventListener('click', () => {
				// 	this.showMenu = false
				// })
				//是否关闭 or 打开
				if (this.showMenu) {
					this.showMenu = false
				} else {
					this.showMenu = true
				}
			},
			item_click(item) {
				this.$emit('change', item)
				this.showMenu = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.select_down_mDown {
		position: relative;
		// transform: translateX(-20rpx);

		.select_down {
			min-width: 180rpx;
			height: 72rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 14rpx;
			display: flex;
			flex-direction: wrap;
			align-items: center;
			transition: .3s;

			.select_down_text {
				display: flex;
				align-items: center;
				height: 36rpx;
				font-size: 30rpx;
				font-family: SF UI Text;
				font-weight: 300;
				line-height: 36rpx;
				color: #3B3B3B;
				opacity: 1;
				margin-left: 0;

				// padding-left: 8rpx;
				image {
					margin-right: 8rpx;
				}
			}

			.select_down_border {
				width: 7rpx;
				height: 60rpx;
				border-left: 7rpx solid #F0F0F0;
				margin-left: 0;
			}

			.select_down_image {
				width: 18rpx;
				height: 10rpx;
				margin-left: 4rpx;
				transition: .3s;

				&.is-down {
					transform: rotate(180deg);
				}
			}
		}

		.select_down_ {
			position: absolute;
			// width: 434rpx;
			// height: 600rpx;
			background: #FFFFFF;
			opacity: 1;
			margin-top: 4rpx;
			border-radius: 14rpx;
			padding-top: 10rpx;
			display: flex;
			flex-direction: column;
			// overflow-x: hidden;
			box-shadow: 0 0 20rpx #BFBFBF;
			z-index: 10;
			left: -5rpx;

			&::after {
				content: '';
				position: absolute;
				border: 10rpx solid #fff;
				transform: rotate(45deg);
				z-index: 2;
				border-right-color: transparent;
				border-bottom-color: transparent;
				right: 16rpx;
				top: -10rpx;
				// box-shadow: 0rpx 0rpx 5rpx #BFBFBF;
			}

			.select_down_item {
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
				font-size: 30rpx;
				color: #000;
				// width: 360rpx;
				border-radius: 14rpx;
				display: flex;

				>text {
					flex: auto;
					position: relative;

					&:not(:last-child) {
						&::before {
							position: absolute;
							content: '';
							height: 2rpx;
							width: 100%;
							background-color: #BFBFBF;
							bottom: -10rpx;
						}
					}
				}

				&:not(:last-child) {
					>text {
						&::before {
							position: absolute;
							content: '';
							height: 2rpx;
							width: calc(100% + 20rpx);
							background-color: #F0F0F0;
							bottom: -10rpx;
						}
					}
				}

				// border-bottom: 2rpx solid #F0F0F0;
				image {
					margin-right: 5rpx;
				}
			}

		}
	}
</style>
